import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';

import Pagination from 'rc-pagination';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import Empty from 'components/widgets/Empty';
import ModelsDialog from 'components/services/ModelsDialog';
import ModelsConfig from 'components/services/ModelsConfig';
import ReSelectField from 'components/widgets/ReSelectField';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ModelsManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});

        this.modelTypeList = [{vaule: '', label: '全部'}, {value: 2, label: '体验馆'}, {value: 4, label: '少儿馆'},
            {value: 3, label: '艺术家馆'}, {value: 5, label: '机构馆'}, {value: 1, label: '定制馆'}];
        this.modelHiddenlist = [{value: '', label: '全部'}, {value: '0', label: '显示'}, {value: '1', label: '隐藏'}];

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    render() {

        return (
            <div className="orin-s-modelsmanage-root">
                <SetHelmet title="展馆管理"/>
                <ModelsDialog/>
                <ModelsConfig/>
                <div className="header-wrapper">展馆管理</div>
                <div className="search-wrapper">
                    <div className="search-left">
                        <ReTextField
                            isLabel={false}
                            type="text"
                            className="work-input"
                            notfullWidth={false}
                            onChange={(e, v) => this.store.keywordChange(v)}
                            errorText={''}
                            searchIcon={true}
                            searchHandler={() => this.store.searchHandle()}
                            closeIcon={true}
                            closeHandler={() => this.store.closeHandle()}
                            value={this.store.keyword}
                            placeholder={'输入展馆名称'}
                            onKeyDown={(e) => this.store.keydownMethod(e)}/>
                        <ReSelectField
                            type=""
                            className="identity-input"
                            isOpen={false}
                            list={this.modelTypeList}
                            value={this.store.type}
                            placeholder={'请选择展馆类型'}
                            onChange={(v) => this.store.typeChange(v.value)}/>
                        <ReSelectField
                            type=""
                            className="identity-input"
                            isOpen={false}
                            list={this.modelHiddenlist}
                            value={this.store.hiddenState}
                            placeholder={'是否显示'}
                            onChange={(v) => this.store.hiddenStateChange(v.value)}/>
                    </div>
                    <div className="search-right">
                        <ReButton label="添加展馆" className="add-btn"
                                  onClick={() => this.store.modelAdd()}/>
                    </div>
                </div>
                <div className="content-data-wrapper">
                    <div className="content-header-title">
                        <div className="content-number title">
                        </div>
                        <div className="content-cover title">
                            <span>图片</span>
                        </div>
                        <div className="content-name title">
                            <span>名称</span>
                        </div>
                        <div className="content-size title">
                            <span>面积</span>
                        </div>
                        <div className="content-size title">
                            <span>展线</span>
                        </div>
                        <div className="content-size title">
                            <span>高度</span>
                        </div>
                        <div className="content-count title">
                            <span>建议作品数量</span>
                        </div>
                        <div className="content-type title">
                            <span>排序</span>
                        </div>
                        <div className="content-type title">
                            <span>类型</span>
                        </div>
                        <div className="content-more-btn title">
                            <span>更多</span>
                        </div>
                    </div>
                    <div className="content">
                        {
                            this.store.modelsList.map((item, index) => {
                                let popMenuOption = [{
                                    'name': '预览',
                                    'func': (e) => this.store.previewClick(item),
                                }, {
                                    'name': '编辑',
                                    'func': (e) => this.store.editClick(item),
                                }, {
                                    'name': '配置',
                                    'func': (e) => this.store.configClick(item),
                                }, {
                                    'name': '排序',
                                    'func': (e) => this.store.sortClick(item),
                                }, {
                                    'name': '删除',
                                    'func': (e) => this.store.deleteClick(item),
                                }
                                ];
                                return (
                                    <div key={index} className="users-wrapper-pc">
                                        <div className="user-item-wrapper">
                                            <div className="content-number">
                                                <span className="text">
                                                    {(this.store.currentPage - 1) * $$.SEM.MODELS_LIST_SIZE + index + 1}
                                                </span>
                                            </div>
                                            <div className="content-cover">
                                                <div className="cover">
                                                    <img className="cover-image"
                                                         src={$$.utils.pictureThumb(item.cover, true, 200)}/>
                                                </div>
                                            </div>
                                            <div className="content-name">
                                                <p className="text">
                                                <span>
                                                    {item.name}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {item.space || '0m²'}
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {!!item.modelLength ? item.modelLength / 100 : 0} m
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-size">
                                                <p className="text">
                                                <span>
                                                    {!!item.modelHigh ? item.modelHigh / 100 : 0} m
                                                </span>
                                                </p>
                                            </div>
                                            <div className="content-count">
                                                <p className="text">
                                                    <span>
                                                        {item.recommendCount}
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="content-type">
                                                <p className="text">
                                                    <span>
                                                        {item.sort}
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="content-type">
                                                <p className="text">
                                                    <span>
                                                        {$$.utils.changeStyle(item.style)}
                                                    </span>
                                                </p>
                                            </div>
                                            <div className="content-more-btn">
                                                {
                                                    popMenuOption.map((item, index) => {
                                                        return (
                                                            <div key={index} className="select-button"
                                                                 onClick={(e) => item.func && item.func()}>
                                                                <span className="btn-name">{item.name}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={true} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }

                {
                    this.store.modelsList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂未搜索到展馆'}/>
                }
                {
                    this.store.modelsList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共{this.store.modelsTotal}条数据，当前有{this.store.modelsList.length}条
                        </div>

                        <Pagination
                            onChange={(current) => this.store.paginationChange(current)}
                            defaultPageSize={$$.SEM.MODELS_LIST_SIZE}
                            defaultCurrent={this.store.currentPage}
                            current={this.store.currentPage}
                            total={this.store.modelsTotal}/>
                    </div>
                }
            </div>
        );
    }
}